import * as PIXI from 'pixi.js';

const app = new PIXI.Application({ background: '#1099bb', resizeTo: window });

document.body.appendChild(app.view);

async function init()
{
    // manifest example
    const manifestExample = {
        bundles: [
            {
                name: 'load-screen',
                assets: [
                    {
                        name: 'flowerTop',
                        srcs: 'https://pixijs.com/assets/flowerTop.png',
                    },
                ],
            },
            {
                name: 'game-screen',
                assets: [
                    {
                        name: 'eggHead',
                        srcs: 'https://pixijs.com/assets/eggHead.png',
                    },
                ],
            },
        ],
    };

    await PIXI.Assets.init({ manifest: manifestExample });

    // bundles can be loaded in the background too!
    PIXI.Assets.backgroundLoadBundle(['load-screen', 'game-screen']);

    makeLoadScreen();
}

async function makeLoadScreen()
{
    // get the assets from the load screen bundle.
    // If the bundle was already downloaded the promise resolves instantly!
    const loadScreenAssets = await PIXI.Assets.loadBundle('load-screen');

    // create a new Sprite from the resolved loaded texture
    const goNext = new PIXI.Sprite(loadScreenAssets.flowerTop);

    goNext.anchor.set(0.5);
    goNext.x = app.screen.width / 2;
    goNext.y = app.screen.height / 2;
    app.stage.addChild(goNext);

    goNext.eventMode = 'static';
    goNext.cursor = 'pointer';

    goNext.on('pointertap', async () =>
    {
        goNext.destroy();
        makeGameScreen();
    });
}

async function makeGameScreen()
{
    // Wait here until you get the assets
    // If the user spends enough time in the load screen by the time they reach the game screen
    // the assets are completely loaded and the promise resolves instantly!
    const loadScreenAssets = await PIXI.Assets.loadBundle('game-screen');

    // create a new Sprite from the resolved loaded texture
    const goBack = new PIXI.Sprite(loadScreenAssets.eggHead);

    goBack.anchor.set(0.5);
    goBack.x = app.screen.width / 2;
    goBack.y = app.screen.height / 2;
    app.stage.addChild(goBack);

    goBack.eventMode = 'static';
    goBack.cursor = 'pointer';

    goBack.on('pointertap', async () =>
    {
        goBack.destroy();
        // The user can go back and the files are already downloaded
        makeLoadScreen();
    });
}

init();
